<template>  
    <div class="custom-rate">  
      <div  
      v-for="(item, index) in displayedRate"  
        :key="index"  
        class="rate-item"  
        :class="{ 'is-selected': index < value }"  
      >  
        <!-- 使用你的 SVG 图标 -->  
        <svg  
          xmlns="http://www.w3.org/2000/svg"  
          width="16"  
          height="16"  
          viewBox="0 0 16 16"  
          fill="none"  
        >  
          <path  
            d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM12.9714 7.37142L10.3429 9.14286L11.3143 12C11.3143 12.0571 11.3143 12.1143 11.3143 12.1143C11.3143 12.3429 11.0857 12.5714 10.8571 12.5714C10.7429 12.5714 10.6286 12.5143 10.5714 12.5143L8 10.7429L5.37142 12.5143C5.31428 12.5143 5.2 12.5714 5.08572 12.5714C4.8 12.5714 4.62858 12.3429 4.62858 12.1143C4.62858 12.0571 4.62858 12 4.62858 12L5.6 9.14286L3.02858 7.37142C2.91428 7.31428 2.85714 7.2 2.85714 7.02858C2.85714 6.8 3.08572 6.57142 3.31428 6.57142L6.51428 6.57142L7.48572 3.71428C7.6 3.54286 7.77142 3.42858 8 3.42858C8.22858 3.42858 8.4 3.54286 8.45714 3.77142L9.42858 6.62858L12.6286 6.62858C12.9143 6.62858 13.0857 6.85714 13.0857 7.08572C13.1429 7.2 13.0857 7.31428 12.9714 7.37142Z"  
            fill="#FFC300"  
          />  
        </svg>  
      </div>  
    </div>  
  </template>  
    
  <script>  
  export default {  
  name: 'custom-rate',  
  props: {  
    value: {  
      type: Number,  
      default: 0,  
    },  
    maxRate: {  
      type: Number,  
      default: 5,  
    },  
  },  
  computed: {  
    displayedRate() {  
      return Array.from({ length: this.value }, (_, i) => i + 1);  
    }  
  },  
};  
  </script>  
    
  <style scoped>  
  .custom-rate {  
    display: flex;  
    align-items: center;  
  }  
  .rate-item {  
    margin-right: 5px; /* 根据需要调整星星之间的间距 */  
    height: 16px;
    width: 16px;
  }  
  .rate-item.is-selected {  
    /* 如果需要，可以为已选中的星星添加样式 */  
  }  
  </style>